<template>
    <div class="nodeClass">
      <template v-for="item in values.objectNames">
         <el-tag slot="prefix" 
         @close="handleClose(item)" 
         :key="item" 
         style="margin-right: 3px" 
         closable 
         disable-transitions
         type="success">
         <i :class="iconClass" class="iconClass"></i>
         {{item}}
         </el-tag>
      </template>
    </div>
</template>
<script>
export default {
  name: 'CustomNode',
  data() {
    return {
      values: {
        objectIds: [],
        objectNames: [],
        objectProps: []
      },
      lastSelectType: null
    }
  },
  props: {
    // 格式为：
    // {
    //  show:  是否显示   Boolean
    //  page:  菜单id    String
    //  isMulti: 是否多选
    //  org:
    //  grid
    //  group
    //  meter
    //
    // }
    supportType: {
      type: Object,
      required: true,
      validator: function(value) {
        if (!value.detail.org && !value.detail.grid && !value.detail.group && !value.detail.query || !value.page) {
          return false
        } else {
          return true
        }
      }
    },
    defaultValue: {
      type: Object,
      validator: function(value) {
        const supportTypes = ['org', 'substation', 'line', 'transformer', 'tfline', 'customer',
          'endDevice', 'meter', 'meterGroup', 'endDeviceGroup', 'customerGroup']
        if (!value.objectType || supportTypes.indexOf(value.objectType) === -1) {
          return false
        } else {
          return true
        }
      }
    }
  },
  methods: {
    handleClose(tag) {
      this.values.objectIds.splice(this.values.objectNames.indexOf(tag), 1)
      this.values.objectNames.splice(this.values.objectNames.indexOf(tag), 1)
      this.values.objectProps.splice(this.values.objectNames.indexOf(tag), 1)
      this.emitValue()
    },
    checkExist(org, orgLs) {
      let isNeed = true
      orgLs.forEach(element => {
        if (org.length > element && org.indexOf(element) !== -1) {
          isNeed = false
          return false
        }
      })
      return isNeed
    },
    emitValue() {
      let emitValue = { }
      if (this.lastSelectType === 'org') { // 当为单位多选时，把父子节点同时选取的，把子节点给去掉
        const objectIds = []
        const objectNames = []
        const objectProps = []
        this.values.objectIds.forEach((element, index, array) => {
          if (this.checkExist(element, array)) {
            objectIds.push(element)
            objectNames.push(this.values.objectNames[index])
            objectProps.push(this.values.objectProps[index])
          }
        })
        emitValue.objectIds = objectIds
        emitValue.objectNames = objectNames
        emitValue.objectProps = objectProps
      } else {
        emitValue = this.values
      }
      emitValue.objectType = this.lastSelectType
      this.$emit('input', emitValue)
    }
  },
  computed: {
    currentPage() {
      return this.$store.getters.currentPage
    },
    queryParam() {
      return this.$store.getters.treeQueryParam
    },
    isMulti() {
      return this.supportType.detail.isMulti || false
    },
    iconClass() {
      return 'iconfont icon-' + this.lastSelectType
    }
  },
  created() {
    this.$store.dispatch('setQueryType', this.supportType)
    if (this.defaultValue) {
      this.values.objectIds = this.defaultValue.objectIds
      this.values.objectNames = this.defaultValue.objectNames
      this.lastSelectType = this.defaultValue.objectType
      this.$emit('input', this.defaultValue)
    }
  },
  watch: {
    queryParam() {
      if (this.currentPage === this.supportType.page) {
        if (!this.lastSelectType || this.queryParam.objectType === this.lastSelectType) {
          if (this.values.objectIds.indexOf(this.queryParam.objectId) === -1) {
            if (this.values.objectIds.length >= 5) {
              this.$alert(this.$t('common.mostSopportCount'), this.$t('common.prompt'), {
                confirmButtonText: this.$t('common.confirm')
              })
            } else {
              this.lastSelectType = this.queryParam.objectType
              if (this.isMulti) {
                this.values.objectIds.push(this.queryParam.objectId)
                this.values.objectNames.push(this.queryParam.objectName)
                this.values.objectProps.push(this.queryParam.objectProp)
              } else {
                this.values.objectIds = [this.queryParam.objectId]
                this.values.objectNames = [this.queryParam.objectName]
                this.values.objectProps = [this.queryParam.objectProp]
              }
            }
          }
        } else {
          this.confirm('common.prompt', 'common.cancelLast', 'common.continue').then(() => {
            this.lastSelectType = this.queryParam.objectType
            this.values.objectIds = [this.queryParam.objectId]
            this.values.objectNames = [this.queryParam.objectName]
            this.values.objectProps = [this.queryParam.objectProp]
          })
        }
      }
      this.emitValue()
    }
  }
}
</script>

<style lang="scss" scoped>
    .nodeClass{
      -webkit-appearance: none;
      background-color: #f5f7fa;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      min-height: 28px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
      min-width: 178px;
      
    }
    .iconClass{
      font-size: 12px;
      margin-right: 3px;
      color: $blue
    }
</style>


